<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/22
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>商品管理</title>

    <link href="/statics/css/bootstrap.css" rel="stylesheet"/>
    <link href="/statics/font/bootstrap-icons.css" rel="stylesheet">

</head>
<body>
<%@include file="inc/nav.jsp" %>

<div class="container-fluid">
    <div class="row p-3 mt-3">
        <div class="col-3 col-lg-2">
            <%@include file="inc/menu.jsp" %>
        </div>
        <div class="col-9 col-lg-10">
            <div class="d-flex">
                <div class="input-group mr-auto w-50">
                    <form class="form-inline" action="/goods/list" method="post">
                        <input type="text" name="name" class="form-control" placeholder="请输入查询条件">
                        <button type="submit" class="btn btn-success ml-2"><i class="bi-search"></i>查询</button>
                    </form>
                </div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addGoods"><i
                        class="bi-plus"></i>添加商品
                </button>
            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <table class="table table-hover table-bordered table-striped text-center">
                        <thead class="thead-dark">
                        <tr>
                            <th scope="col">序号</th>
                            <th scope="col">商品名称</th>
                            <th scope="col">规格</th>
                            <th scope="col">条形码</th>
                            <th scope="col">售价</th>
                            <th scope="col">库存</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${requestScope.goodsList}" var="g" varStatus="vs">
                            <tr>
                                <td>${vs.count}</td>
                                <td>${g.name}</td>
                                <td>${g.specs}</td>
                                <td>${g.sn}</td>
                                <td>${g.price}</td>
                                <td>${g.stock}</td>
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-primary text-white" href="#"
                                           data-toggle="modal" data-target="#addRestock" goods-id="${g.id}" goods-name="${g.name}">
                                            <i class="bi-gear"></i>进货</a>
                                        <a class="btn btn-sm btn-warning text-white" href="#"
                                           data-toggle="modal" data-target="#editGoods" goods-id="${g.id}">
                                            <i class="bi-gear"></i>编辑</a>
                                        <a class="btn btn-sm btn-danger" href="/goods/delete?id=${g.id}">
                                            <i class="bi-trash"></i>删除</a>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pagination justify-content-between">
                            <li class="page-item">
                                <a class="page-link rounded-pill"
                                   href="/goods/list?currentPage=${requestScope.pager.previous}&name=${param.name}"
                                   tabindex="-1">上一页</a>
                            </li>
                            <li class="page-item"><a class="page-link rounded-pill">总共${requestScope.pager.pageCount}页，当前第${requestScope.pager.currentPage}页</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link rounded-pill"
                                   href="/goods/list?currentPage=${requestScope.pager.next}&name=${param.name}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="fixed-bottom bg-dark text-white">
    <p class="text-center p-3 m-0">
        超市管理系统
    </p>
</footer>
<!-- 添加商品Modal -->
<div class="modal fade" id="addGoods" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加商品</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addGoodsForm" action="/goods/add" method="post">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">商品</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control" placeholder="商品名">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">规格</label>
                        <div class="col-sm-10">
                            <input type="text" name="specs" class="form-control" placeholder="规格">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">条形码</label>
                        <div class="col-sm-10">
                            <input type="text" name="sn" class="form-control" placeholder="条形码">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">售价</label>
                        <div class="col-sm-10">
                            <div class="input-group mb-3">
                                <input type="number" name="price" class="form-control" placeholder="售价">
                                <div class="input-group-append">
                                    <span class="input-group-text">元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">分类</label>
                        <div class="col-sm-10">
                            <select name="category_id" class="form-control">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-danger d-none alert">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑商品Modal -->
<div class="modal fade" id="editGoods" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑商品</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editGoodsForm" action="/goods/edit" method="post">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">商品</label>
                        <div class="col-sm-10">
                            <input type="hidden" name="id">

                            <input type="text" name="name" class="form-control" placeholder="商品名">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">规格</label>
                        <div class="col-sm-10">
                            <input type="text" name="specs" class="form-control" placeholder="规格">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">条形码</label>
                        <div class="col-sm-10">
                            <input type="text" name="sn" class="form-control" placeholder="条形码">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">售价</label>
                        <div class="col-sm-10">
                            <div class="input-group mb-3">
                                <input type="number" name="price" class="form-control" placeholder="售价">
                                <div class="input-group-append">
                                    <span class="input-group-text">元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">分类</label>
                        <div class="col-sm-10">
                            <select name="category_id" class="form-control">
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-danger d-none alert">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="editButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 进货Modal -->
<div class="modal fade" id="addRestock" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">进货</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addRestockForm" action="/restock/add" method="post">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">商品</label>
                        <div class="col-sm-10">
                            <input type="hidden" name="goods_id">

                            <input type="text" name="name" class="form-control" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">单价</label>
                        <div class="col-sm-10">
                            <div class="input-group mb-3">
                                <input type="number" name="price" class="form-control" placeholder="进货价">
                                <div class="input-group-append">
                                    <span class="input-group-text">元</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">数量</label>
                        <div class="col-sm-10">
                            <input type="number" name="stock" class="form-control" placeholder="进货数量">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">供应商</label>
                        <div class="col-sm-5">
                            <select name="supplier_id" class="form-control">
                                <option>请选择</option>
                            </select></div>
                        <div class="col-5">
                            <div class="input-group mb-3">
                                <input id="supplier_name" type="text" class="form-control" placeholder="查询供应商">
                                <div class="input-group-append">
                                    <button id="search_supplier" class="btn btn-success" type="button"><i class="bi-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-danger d-none alert">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addRestockButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="/statics/js/jquery.js" type="text/javascript"></script>
<script src="/statics/js/bootstrap.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        //显示添加模态框，异步加载分类列表
        $("button[data-target='#addGoods']").click(function () {
            $.getJSON("/categories", function (result) {
                let list = result.data;
                $("#addGoodsForm select[name=category_id]").empty();
                $("#addGoodsForm select[name=category_id]").append(`<option value=''>请选择</option>`);
                list.forEach(({id, name}) => {
                    $("#addGoodsForm select[name=category_id]").append(`<option value='\${id}'>\${name}</option>`);//$避免和el冲突，使用转义字符
                })
            })
        });
        //保存前数据验证
        $("#addButton").click(function () {
            let error = "";
            let addForm = $("#addGoodsForm");
            if (addForm.find("input[name=name]").val() == "") {
                error += "请输入商品名<br>";
            }
            if (addForm.find("input[name=specs]").val() == "") {
                error += "请输入商品规格<br>";
            }
            if (addForm.find("input[name=sn]").val() == "") {
                error += "请输入商品条形码<br>";
            }
            if (addForm.find("input[name=price]").val() == "") {
                error += "请输入商品价格<br>";
            }
            if (addForm.find("select[name=category_id]").val() == "") {
                error += "请选择分类<br>";
            }

            if (error != "") {
                addForm.find("div[class~=alert]").html(error);
                addForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                addForm.find("div[class~=alert]").addClass("d-none");
                addForm.submit();
            }

        });
        //显示编辑模态框，异步加载商品信息，分类列表
        $("a[data-target='#editGoods']").click(function () {
            let goods_id = $(this).attr("goods-id");
            $.getJSON("/categories", function (result) {
                let list = result.data;
                $("#editGoodsForm select[name=category_id]").empty();
                $("#editGoodsForm select[name=category_id]").append(`<option value=''>请选择</option>`);
                list.forEach(({id, name}) => {
                    $("#editGoodsForm select[name=category_id]").append(`<option value='\${id}'>\${name}</option>`);//$避免和el冲突，使用转义字符
                });
                $.getJSON("/goods", {id: goods_id}, function (result) {
                    $("#editGoodsForm").find("input[name=id]").val(result.data.id);
                    $("#editGoodsForm").find("input[name=name]").val(result.data.name);
                    $("#editGoodsForm").find("input[name=specs]").val(result.data.specs);
                    $("#editGoodsForm").find("input[name=sn]").val(result.data.sn);
                    $("#editGoodsForm").find("input[name=price]").val(result.data.price);
                    $("#editGoodsForm").find("select[name=category_id]").val(result.data.categoryId);
                });
            });

        });
        //更新前数据验证
        $("#editButton").click(function () {
            let error = "";
            let editForm = $("#editGoodsForm");

            if (editForm.find("input[name=name]").val() == "") {
                error += "请输入商品名<br>";
            }
            if (editForm.find("input[name=specs]").val() == "") {
                error += "请输入商品规格<br>";
            }
            if (editForm.find("input[name=sn]").val() == "") {
                error += "请输入商品条形码<br>";
            }
            if (editForm.find("input[name=price]").val() == "") {
                error += "请输入商品价格<br>";
            }
            if (editForm.find("select[name=category_id]").val() == "") {
                error += "请选择分类<br>";
            }

            if (error != "") {
                editForm.find("div[class~=alert]").html(error);
                editForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                editForm.find("div[class~=alert]").addClass("d-none");
                editForm.submit();
            }

        });

        $("a[data-target='#addRestock']").click(function () {
            let goods_id = $(this).attr("goods-id");
            let goods_name = $(this).attr("goods-name");
            $("#addRestockForm input[name=goods_id]").val(goods_id);
            $("#addRestockForm input[name=name]").val(goods_name);
            let select_supplier = $("#addRestock select[name=supplier_id]");
            $.getJSON("/suppliers", function (result) {
                select_supplier.empty();
                select_supplier.append(`<option value=''>请选择</option>`);
                result.data.forEach(({id, name}) => {
                    select_supplier.append(`<option value='\${id}'>\${name}</option>`);
                });
            });

        });

        $("#search_supplier").click(function () {
            let select_supplier = $("#addRestock select[name=supplier_id]");
            $.getJSON("/suppliers", {name: $("#supplier_name").val()}, function (result) {
                select_supplier.empty();
                select_supplier.append(`<option value=''>请选择</option>`);
                result.data.forEach(({id, name}) => {
                    select_supplier.append(`<option value='\${id}'>\${name}</option>`);
                });
            });

        });

        $("#addRestockButton").click(function () {
            let error = "";
            let addRestockForm = $("#addRestockForm");
            if (addRestockForm.find("input[name=price]").val() == "") {
                error += "请输入商品价格<br>";
            }
            if (addRestockForm.find("input[name=stock]").val() == "") {
                error += "请输入数量<br>";
            }
            if (addRestockForm.find("select[name=supplier_id]").val() == "") {
                error += "请选择供应商<br>";
            }

            if (error != "") {
                addRestockForm.find("div[class~=alert]").html(error);
                addRestockForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                addRestockForm.find("div[class~=alert]").addClass("d-none");
                addRestockForm.submit();
            }

        });
    });
</script>


</body>
</html>
